<!-- 退还申请 -->
<template>
	<view style="padding-bottom: 160rpx;">
		<view class="p-3">
			<u--form errorType="toast" labelWidth="80" :labelStyle="{fontSize:'28rpx'}" labelPosition="left"
				:model="postData" :rules="rules" ref="uForm">
				<view class="bt-block p-2"> 
					<u-form-item label="姓名">
						<view class="w-100 font-1 text-grey2 flex justify-end">
							{{$store.getters.name}}
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="身份证号">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{$store.state.user.idCardNo}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="手机号">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{$store.state.user.phone}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="项目名称" prop="projectId">
						<view class="form-block">
							<bg-select @select-change="selectHandler" :value.sync="postData.projectId" :columns="projectList" key="projectId"></bg-select>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="归还物资" prop="materialId">
						<view class="form-block">
							<bg-select ref="material" @select-change="materialHandler" :value.sync="postData.materialId" :columns="materialList" key="projectId"></bg-select>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="归还">
						<view class="form-block">
							<u-number-box :min="1" v-model="postData.returnCount" :step="1"></u-number-box>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="单件价格">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{postData.unitPrice}}</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="合计总价">
						<view class="w-100 font-1 text-grey2 flex justify-end">{{postData.totalAmount}}</view>
					</u-form-item>
					<view class="font-12 text-red ml-3 mb-3">*如丢失此金额在申领人工资表中扣除</view>
					<view class="bt-line-1"> </view>
					<u-form-item label="未归还">
						<view class="form-block">
							<u-number-box :min="0" v-model="postData.unreturnCount" :step="1"></u-number-box>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="扣除金额">
						<view class="w-100 font-1 text-red flex justify-end">{{postData.deductAmount}}</view>
					</u-form-item>
				</view>
				
				<view class="bt-block mt-3">
					<u-form-item required label="退还人签字" labelWidth="120" labelPosition="top">
						<view class="py-3">
							<bg-sign @sign-success="signHandler"></bg-sign>
						</view>
					</u-form-item>
				</view>
				<view class="bt-block mt-3 pl-3">
					<u-form-item required label="归还照片" labelWidth="120" labelPosition="top">
					</u-form-item>
					<view class="mb-3">
						<bg-upload key="returnMaterialImgs" :value.sync="postData.returnMaterialImgs"
							:count="9"></bg-upload>
					</view>
				</view>
			</u--form>
		</view>
		<view class="bt-footer">
			<bg-btn @tap="saveData">退还人确认提交</bg-btn>
		</view>
	</view>
</template>

<script>
	import { returnApplyList, returnPost } from '../../../api/apply'
	export default {
		mounted() {
			this.$store.dispatch("types/getProjects").then(res=>{
				this.projectList = res
			})
		},
		data() {
			return {
				materialList:[],
				projectList:[],
				postData: {
					"projectId": '',
					  "materialId": '',
					  "returnCount": 0,
					  "returnMaterialImgs": "",
					  "signedImg": "",
					  "createUserId": 0,
					  "unitPrice": 0,
					  "totalAmount": 0,
					  "unreturnCount": 0,
					  "deductAmount": 0
				},
				rules: {
					'materialId': {
						type:'number',
						required: true,
						message: '请选择物资',
					},
					'projectId': {
						type:'number',
						required: true,
						message: '请选择项目',
					},
				}
			}
		},
		methods: {
			selectHandler(e){
				this.$refs.material.clear()
				this.postData.unitPrice = 0
				this.postData.totalAmount = 0
				this.postData.deductAmount = 0
				this.postData.unreturnCount = 0
				this.postData.returnCount = 0
				this.getApplyReturnList()
			},
			getApplyReturnList(){
				returnApplyList({projectId:this.postData.projectId}).then(res=>{
					this.materialList = res.data
					this.materialList.forEach(m=>{
						m.label=m.materialName
						m.value=m.materialId
					})
				})
			},
			materialHandler({value, values}){
				console.log(value)
				let _value = value[0]
				this.postData.returnCount = _value.unreturnCount
				this.postData.unitPrice = _value.unitPrice
				this.postData.totalAmount = _value.totalAmount
			},
			signHandler(e){
				this.postData.signedImg = e.fileName
			},
			async saveData(){
				let valid = await this.$refs.uForm.validate()
				if(valid){
					returnPost(this.postData).then(res=>{
						uni.$emit('refresh-page', true)
						this.$modal.msg("提交成功")
						this.$tab.navigateBackDelay()
					})
				}
			}
		},
		watch:{
			"postData.unreturnCount":function(newVal, oldVal){
				this.postData.deductAmount = newVal*this.postData.unitPrice
			},
			"postData.returnCount":function(newVal, oldVal){
				this.postData.totalAmount = newVal*this.postData.unitPrice
			}
		}
	}
</script>

<style>

</style>